<template>
  <el-dialog
    title="权责清单"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog"
    width="50%"
    :before-close="handleClose"
  >
    <div class="navMsg">
      <div>当前选项：</div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="(item, i) in navMsgArr" :key="i">{{
          item.name
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="typeBox">
      <ul v-for="(item, i) in ulDataArr.length" :key="i" class="itemUl">
        <li
          v-for="item in ulDataArr[i]"
          :key="item.id"
          @click="changeNextType(item, i)"
          class="itemLi"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="btn">
      <el-button @click="cancelBtn">取消</el-button>
      <el-button type="primary" @click="sureBtn">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { industryArea } from "@/api/case.js";
export default {
  data() {
    return {
      ulDataArr: [],
      navMsgArr: [],
      dateObj: {
        parentCode: 0
      }
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose() {
      this.$emit("closeDialog");
      // 关闭弹窗清楚数据
      this.navMsgArr = [];
      this.ulDataArr = [];
    },

    // 获取三级分类第一级父类
    getThreeType(date) {
      industryArea(date)
        .then(result => {
          let { rows, code } = result;
          if (code == 200) {
            this.ulDataArr.push(rows);
          }
        })
        .catch({});
    },

    // 获取三级分类的子类
    changeNextType(val, index) {
      industryArea({ parentCode: val.code })
        .then(result => {
          let { rows, code } = result;
          // this.navMsgArr = [];
          // this.ulDataArr = [];
          if (code == 200 && rows.length > 0) {
            this.ulDataArr.forEach((item, i) => {
              if (index >= i) this.ulDataArr.splice(index + 1, 1);
              if (index == 0) this.ulDataArr.splice(index + 2, 1);
            });
            this.ulDataArr.splice(index + 1, 1, rows);
          }
          this.navMsgArr.forEach((item, i) => {
            if (index >= i) this.navMsgArr.splice(index, 1);
            if (index == 0) this.navMsgArr.splice(index + 1, 1);
          });
          this.navMsgArr.splice(index, 1, val);
        })
        .catch({});
    },

    // 取消
    cancelBtn() {
      this.$emit("closeDialog");
      // 关闭弹窗清楚数据
      this.navMsgArr = [];
      this.ulDataArr = [];
    },

    // 确定
    sureBtn() {
      if (this.navMsgArr.length == 0) {
        this.$message.warning("请选择权责清单");
      } else {
        this.$bus.$emit("threeType", this.navMsgArr[this.navMsgArr.length - 1]);
        this.$emit("closeDialog");
        this.$emit("threeTypeMsg", this.navMsgArr[this.navMsgArr.length - 1]);

        // 关闭弹窗清楚数据
        this.navMsgArr = [];
        this.ulDataArr = [];
      }
    }
  },

  created() {
    this.$bus.$on("remarks", data => {
      this.dateObj.typeCode = data;
      // 获取三级分类
      this.getThreeType(this.dateObj);
    });

    // this.getThreeType(this.dateObj);
  }
};
</script>
<style scoped lang="scss">
.typeBox {
  display: flex;
  margin-left: 10px;
}
.navMsg {
  margin-left: 10px;
  display: flex;
  height: 20px;
  line-height: 20px;
}
/deep/ .navMsg .el-breadcrumb {
  height: 20px;
  line-height: 20px;
  .el-breadcrumb__item {
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-breadcrumb__inner {
      width: 100px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      display: inline-block;
      text-align: center;
    }
  }
}

.itemUl {
  list-style: none;
  border: 1px solid #ccc;
  padding: 0;
  width: 150px;
  margin-right: 5px;
  height: 375px;
  overflow-y: auto;
}
.itemUl:nth-child(1),
.itemUl:nth-child(2) {
  width: 100px;
}
.itemUl .itemLi {
  width: 100%;
  height: 34px;
  line-height: 34px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
.active {
  background: skyblue;
  color: #fff;
}

/*滚动条样式*/
.itemUl::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.itemUl::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.itemUl::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
